<template>
  <div style="height:100%;width:100%">
    <!-- <home-bar></home-bar> -->
    <div class="mainContent el-row">
      <div v-if="$store.state.routes.routes.faTimed || $store.state.routes.routes.ywKouXi || $store.state.routes.routes.faSettle">
        <H2>数据预警</H2>
        <el-row style="margin-top: 100px;">
          <el-col :span="6" :offset="1" v-if="$store.state.routes.routes.faTimed">
            <div @click="$router.push('fa_timer')">
              <el-card class="box-card jijiang" >
                <div slot="header" class="clearfix">
                  <span>即将到期方案</span>
                </div>
                <div>
                  <h1>{{expireCount}}</h1>
                </div>
              </el-card>
            </div>

          </el-col>
          <el-col :span="6" :offset="2" v-if="$store.state.routes.routes.ywKouXi">
            <div @click="$router.push({path:'yewu_Charges',query:{state:20}})">
              <el-card class="box-card shibai">
                <div slot="header" class="clearfix">
                  <span>扣息失败方案</span>
                </div>
                <div>
                  <h1>{{feeFailCount}}</h1>
                </div>
              </el-card>
            </div>

          </el-col>
          <el-col :span="6" :offset="2" v-if="$store.state.routes.routes.faSettle">
            <div @click="$router.push('fa_settle')">
              <el-card class="box-card shenqing">
                <div slot="header" class="clearfix">
                  <span>申请结算方案</span>
                </div>
                <div>
                  <h1>{{settleCount}}</h1>
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-else> <H1>欢迎使用后台系统</H1></div>
    </div>
    <!-- <snow></snow> -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        expireCount:0,
        feeFailCount:0,
        settleCount:0,
        isFaTimed:true,
        isYwKouXi:true,
        isFaSettle:true
      };
    },
    created(){
      this.$http('sys/financing/count.do').then(resp=>{
        if(resp.code==1){
          this.expireCount = resp.data.expireCount;
          this.feeFailCount = resp.data.feeFailCount;
          this.settleCount = resp.data.settleCount;
        }
      })
    }

  };
</script>

<style scoped>
  .box-card:hover{
    cursor: pointer;
  }
  .jijiang{
    background-color: rgba(230,162,60,.1);
    border-color: rgba(230,162,60,.2);
    color: #e6a23c;
  }
  .shibai{
    background-color: hsla(0,87%,69%,.1);
    border-color: hsla(0,87%,69%,.2);
    color: #f56c6c;
  }
  .shenqing{
    background-color: rgba(87, 193, 35, 0.1);
    border-color: rgba(103,194,58,.2);
    color: #67c23a;
  }
</style>


